/**
 * Created by 居胜 on 2016/5/11.
 */
(function(){

    //选择器
    function $(id){
        return document.getElementById(id);
    }

    function checkInput(){
        var inputStr = $("str-input").value.trim();
        $("str-input").value = "";

        var arrInput = inputStr.split(/[^0-9a-zA-Z\u4e00-\u9fa5]+/).filter(function (item) {
            if(item.length > 0){
                return true;
            }else {
                return false;
            }
        });

        console.log(arrInput)

        data = data.concat(arrInput);
    }

    //事件绑定函数
    //事件名： on + ~~ 的形式
    function bindEvent(ele, event_name, func){
        if(window.addEventListener){
            event_name = event_name.replace(/^on/, "")
            ele.addEventListener(event_name, func, false);
        }else if(window.attachEvent) {
            ele.attachEvent(event_name, func);
        }else{
            ele[event_name] = func;
        }
    }

    //保存数据的数组
    var data = [];
   

    //根据数组中的数据渲染页面
    function render(str){
        var dataToHtml = data.map(function(item){

            if(str && str.length >0 ){
                item = item.replace(new RegExp(str, "g"), "<span class='selected'>"+ str +"</span>")
            }

            return "<div class='tag'>" + item + "</div>";
        }).join("");
        $("display").innerHTML = dataToHtml;
        console.log(data)
    }

    //点击事件绑定
    bindEvent($("insert"), "onclick", function () {
        checkInput();
        render();
    })

    bindEvent($("search"), "onclick", function () {
        var str = $("str-input").value.trim();
        render(str);
    })

    //事件代理
    bindEvent($("display"), "onclick", function(event){
        var target = event.target;
        if (target.className.toUpperCase() === "TAG"){
            var clickStr = target.innerHTML;
            var index = data.indexOf(clickStr);
            if(index > -1) {
                data.splice(index, 1);
            }
            render();
        }

    })



})();